<template lang="html">
  <div class="essay_concent">
      <div class="essay_concent_head">
          <div style="line-height:4.5rem;" class="essay_concent_head_img">
              <img @click="goback()" v-bind:src="leftSrc" alt="">
          </div>
          <p style="text-align:center;line-height:4rem;">ONE STORY</p>
          <div style="line-height:5.5rem;width100%" class="essay_concent_head_collect">
              <img  v-bind:src="collect" alt="">
          </div>
      </div>
    <p class="essay_title">{{title}}</p>
    <p class="essay_author">文 / {{author}}</p>
  <div v-html="datas" id="essay_artical">
  </div>
  <div class="essay_author">
    <h4>作者</h4>
    <div class="essay_author_des">
      <div class="essay_author_img">
        <img v-bind:src="authorImg" alt="" @touchstart="fangda()" @touchend="suoxiao()">
      </div>
      <div class="essay_author_text">
          <p>{{authorName}}</p>
          <p>{{authorType}}</p>
      </div>
      <div class="essay_author_guanZhu">
        关注
      </div>
    </div>
    <!-- 作者小弹窗 -->
    <div class="hidde">
      <img :src="authorImg" alt="" class="author_img">
      <p class="author_name">{{ authorName }}</p>
      <p class="author_summary">{{ authorType }}</p>
      <span class="sanjiao"></span>
    </div>
  </div>
  <div class="essay_commen" v-for="item in commentDats" >
    <div class="essay_commen_title">
      <img class="essay_commen_user" v-bind:src="item.user.web_url" alt="">
      <span class="essay_commen_username">{{item.user.user_name}}</span>
      <span class="eassy_commen_date">{{item.created_at.substring(0,16)}}</span>
    </div>
    <div class="essay_commen_content">
        <p>{{item.content}}</p>
    </div>
    <div class="essay_commen_num">
        <img v-bind:src="commentsSrc" alt="">
        <img v-bind:src="like1Src" alt="">
        <span>{{item.praisenum}}</span>
    </div>
  </div>
  <div class="essay_bottom_commen">
    <div class="essay_bottom_input">
      <input type="text" name="" value=""placeholder="写一个评论..">

    </div>
    <div class="essay_bottom_img">
      <img v-bind:src="likeSrc" alt="">


      <img v-bind:src="commentsSrc" alt="">
      <span>{{count}}</span>
      <img v-bind:src="shareSrc" alt="">

    </div>

    <!-- <span>{{}}</span> -->

  </div>
  </div>

</template>

<script>
import axios from 'axios'
export default {
  data(){
    return{
      datas:'',
      title:'',
      author:'',
      desc:'',
      leftSrc:'../../static/img/left.png',
      collect:'../../static/img/collect.png',
      likeSrc:'../../static/img/like.png',
      like1Src:'../../static/img/like1.png',
      like2Src:'../../static/img/like2.png',
      commentsSrc:'../../static/img/comments.png',
      shareSrc:'../../static/img/share.png',
      commentid:'',
      authorImg:'',
      authorName:'',
      authorType:'',
      commentDats:'',
      createdAt:'',
      count:''

    }
  },
  created(){
    axios.get ("http://v3.wufazhuce.com:8000/api/essay/"+this.$route.params.id+"?channel=wdj&source=summary&source_id=9261&version=4.0.2&uuid=ffffffff-a90e-706a-63f7-ccf973aae5ee&platform=android").then((content)=>{
      console.log(content.data.data.author[0]);
      this.author=content.data.data.hp_author
      this.title=content.data.data.hp_title
      this.datas = content.data.data.hp_content;
      this.commentid =  content.data.data.content_id
      this.authorImg = content.data.data.author[0].web_url
      this.authorName = content.data.data.author[0].user_name
      this.authorType = content.data.data.author[0].summary
      axios.get ("http://v3.wufazhuce.com:8000/api/comment/praiseandtime/essay/"+this.commentid+"/0?channel=wdj&version=4.3.4&uuid=ffffffff-a90e-706a-63f7-ccf973aae5ee&platform=android").then((content)=>{
        this.commentDats = content.data.data.data
        console.log(content.data.data);
        this.count = content.data.data.count

      })

    })

  },
  methods:{
    // 作者弹窗
    fangda(){
      let hidde = document.querySelector('.hidde');
      this.timer = setTimeout(function(){
        console.log(hidde);
        hidde.style.display = 'block';
      }, 1000)
    },
    suoxiao(){
      console.log(this.timer);
      let hidde = document.querySelector('.hidde');
      hidde.style.display = 'none';
      clearTimeout(this.timer);
    },
    goback(){
      history.back()
      // this.$router.push({
      //   path:'/allDetials/essay'
      // })
    }
  }
}
</script>

<style lang="css" scoped>
*{
  margin:0;
  padding: 0;
}
.essay_commen{
  border-top: 0.005rem solid lightgray;
}
.essay_commen_title{
  margin-top: 1rem;
}
.essay_commen_num{
  text-align: right;
  margin: 1rem 0;
  margin-right: 2rem;

}
.essay_commen_num img{
  width: 4%;
  height: 4%;
  margin: 0 1rem;
  vertical-align: middle;
}
.essay_commen_content{
  margin:1.5rem 0;
}

.essay_commen_title{
  width: 100%;
  height: 3rem;
  text-align: left;
  margin-left: 1rem;
}
.essay_commen_user{
  width: 5%;
  height: 50%;
  border-radius: 50%;
  vertical-align:middle;

}
.essay_commen_username{
  margin-left: 1rem;
  margin-right: 1rem;
  color:#a5a2a2;

}
.eassy_commen_date{
  float: right;
  color: #a5a2a2;
  margin-right: 2rem;
}
.essay_author{
  margin-bottom: 1rem;
  position: relative;
}
.essay_author_des{
  display: flex;
  justify-content: space-around;

}
.essay_author_img{
  border-radius:50%;
  overflow: hidden;
  flex: 0 0 15%;
  height: 150%;
  margin-left: 0.8rem;
}
.essay_author_img img{
  width: 100%;
  height: 100%;
}
.essay_author_text{
  flex: 1 0 50%;
}


.essay_author_guanZhu{
  flex: 0 0 14%;
  height: 3rem;
  line-height: 3rem;
  margin :auto 0;
  margin-right: 0.8rem;

  border: 0.008rem solid #c7c5c5;
}
.essay_author h4,.essay_commen h4{
  width: 17%;
  margin-bottom: 1rem;
  margin-left: 1rem;
  text-align: left;
  border-bottom: 5px solid black;
  padding: 1rem 0;
}
.essay_concent p{
  width: 94%;
  text-align: left;
  line-height: 200%;
  font-size: 1.5rem;
  color:rgb(128, 128, 128);
  text-indent: 0.6rem;
  margin: 0 auto;

}
#essay_artical img{
  width: 100%;
}
.essay_concent{
  position: relative;
  z-index: 1000;
  background: white;
  margin-bottom: 4rem;
}
.essay_concent .essay_title{
  width: 96%;
  font-size: 2rem;
  color: black;
  margin-top: 5rem;
  margin-bottom: 1rem;
}

.essay_concent_head_collect{
  flex: 0 0 10%;
}

.essay_title .essay_author{
  font-size: 0.6rem;
  margin-bottom: 4rem;
}
.essay_concent_head_img{
  flex: 0 0 10%;
}
.essay_concent_head{
  position: fixed;
  top:0;
  left: 0;
  right:0;
  width: 100%;
  height: 4rem;
  border-bottom:  0.08rem solid black;
  display: inline-flex;
  justify-content: space-around;
  background: white;
}
#essay_artical{
  margin-top: 3rem;
}
.essay_bottom_commen{
  width: 100%;
  height: 4rem;
  position: fixed;
  bottom: 0;
  background: white;
  border-top: 0.004rem solid lightgray;
  line-height: 4rem;

}
.essay_bottom_input{
  height: 2rem;
  width: 30%;
  float: left;
  margin: 0 1rem;
  margin-top: 1rem;
  border: 1px solid #000;
}
.essay_bottom_commen input{
  float: left;
  height: 2rem;
  width: 100%;
  border: none;
  outline: none;
}
.essay_bottom_img{
  float: right;
  margin: 0 1.5rem;
  margin-top: 1rem;

}
.essay_bottom_img img{
  margin-left: 2rem;
  vertical-align: text-top;
}
.essay_bottom_img span{
  display:inline-block;
  /*vertical-align: top;*/
}
.essay_commen_content p{
  font-size: 1rem;
  text-indent: 1rem;
}
/*作者小弹窗*/
.hidde{
  width:60%;
  /*height:10rem;*/
  background: #f5f4f4;
  text-align: center;
  border-radius: 8px;
  display: none;
  position: absolute;
  bottom: 8rem;
  left: 5rem;
}
.hidde>.author_img{
  margin:1rem 0 0rem 0rem;
  clear: both;
  width:5rem;
  height:5rem;
  border-radius: 50%;
}
.hidde>.author_name{
  margin-left: 35%;
}
.hidde .author_summary{
  /*margin:0 0 0 0;*/
  line-height: 2rem;
  height:2rem;
  width: 60%;
  color: gray;
  display: inline-block;
  text-align: center;
}
.desc{
  margin:1rem 1rem 0 1rem;
  padding:0 0 1.5rem 0;
  line-height: 1.5rem;
}
.sanjiao{
  width: 0;
  height: 0rem;
  border: 1rem solid transparent;
  border-top: 1rem solid #f5f4f4;
  position: absolute;
  bottom: -2rem;
  left: 2rem;
}
</style>
